<template>
  <div>
    <el-card>
      <div class="control-box">
        <el-button
          :disabled="showShopBtn"
          class="add-shop"
          @click="addShopItem()"
          type="primary"
          >添加用户</el-button
        >
        <el-dialog
          title="用户信息"
          class="add-form"
          width="672px"
          top="152px"
          :visible.sync="dialogFormVisible"
          center
          @close="closeDialogFormVisible"
        >
          <el-form
            ref="form"
            :model="addNewUser"
            :rules="addForm"
            :label-position="labelPosition"
            label-width="200px"
          >
            <el-form-item ref="name" label="用户名:" prop="name">
              <el-input
                placeholder="用户名"
                v-model="addNewUser.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item ref="realName" label="真实姓名:" prop="realName">
              <el-input
                placeholder="真实姓名"
                v-model="addNewUser.realName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item ref="unit" label="所属单位:" prop="unit">
              <el-input
                placeholder="所属单位"
                v-model="addNewUser.unit"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item ref="phone" label="联系电话:" prop="phone">
              <el-input
                placeholder="联系电话"
                v-model="addNewUser.phone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item ref="right" label="用户权限:" prop="right">
              <el-select
                v-if="showShopQx"
                v-model="addNewUser.right"
                placeholder="用户权限"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select
                v-if="showShopQxTwo"
                v-model="addNewUser.right"
                placeholder="用户权限"
              >
                <el-option
                  v-for="item in optionsTwo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit()">提 交</el-button>
          </div>
        </el-dialog>
        <el-dialog
          title="用户信息"
          class="add-form"
          width="672px"
          top="152px"
          :visible.sync="dialogFormVisibleUpdate"
          center
          @close="closeDialogFormVisibleUpdate"
        >
          <el-form
            ref="formUpdate"
            :model="addNewUser"
            :rules="addForm"
            :label-position="labelPosition"
            label-width="200px"
          >
            <el-form-item ref="name" label="用户名:" prop="name">
              <el-input
                placeholder="用户名"
                v-model="addNewUser.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item ref="realName" label="真实姓名:" prop="realName">
              <el-input
                placeholder="真实姓名"
                v-model="addNewUser.realName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item ref="unit" label="所属单位:" prop="unit">
              <el-input
                placeholder="所属单位"
                v-model="addNewUser.unit"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item ref="phone" label="联系电话:" prop="phone">
              <el-input
                placeholder="联系电话"
                v-model="addNewUser.phone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item ref="right" label="用户权限:" prop="right">
              <el-select
                v-if="showShopQx"
                :disabled="showShopDisableQx"
                v-model="addNewUser.right"
                placeholder="用户权限"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select
                v-if="showShopQxTwo"
                :disabled="showShopDisableQxTwo"
                v-model="addNewUser.right"
                placeholder="用户权限"
              >
                <el-option
                  v-for="item in optionsTwo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="update()">提 交</el-button>
          </div>
        </el-dialog>
        <el-input
          v-model="sousuo"
          placeholder="请输入所属单位名称"
          prefix-icon="el-icon-search"
          style="width:320px;float: right;"
          @keyup.enter.native="searchEnterFun"
        >
        </el-input>
      </div>

      <el-table
        class="shop_list_table"
        highlight-current-row
        :cell-style="{
          textAlign: 'center',
          fontSize: '16px',
          fontFamily: 'Microsoft YaHei',
          fontWeight: '400',
          color: '#494949',
          padding: '2px 0'
        }"
        :header-cell-style="{
          textAlign: 'center',
          fontSize: '16px',
          fontFamily: 'Microsoft YaHei',
          fontWeight: 'bold',
          color: '#494949',
          background: '#F2F6FF',
          padding: '10px 0'
        }"
        :data="shopTable"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60"
          show-overflow-tooltip
        >
          <template scope="scope">
            <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="user_name" label="用户名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="name" label="真实姓名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="unit" label="所属单位" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="user_qx" label="用户权限" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="roomId" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              :disabled="showShopBtn"
              type="text"
              @click="modify(scope.row)"
              >修改</el-button
            >
            <el-button
              v-if="showShopQx"
              :disabled="showShopBtnDelete"
              type="text"
              @click="delet(scope.row)"
              >删除</el-button
            >
            <el-button
              v-if="showShopQxTwo"
              :disabled="scope.row.user_qx === '管理员' ? true : false"
              type="text"
              @click="delet(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="prevClick"
        @next-click="nextClick"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      options: [
        {
          value: "管理员",
          label: "管理员"
        },
        {
          value: "编辑者",
          label: "编辑者"
        },
        {
          value: "查看者",
          label: "查看者"
        }
      ],
      optionsTwo: [
        {
          value: "编辑者",
          label: "编辑者"
        },
        {
          value: "查看者",
          label: "查看者"
        }
      ],
      showShopBtn: false,
      showShopQx: false,
      showShopQxTwo: false,
      showShopDisableQx: false,
      showShopDisableQxTwo: false,
      showShopBtnDelete: false,
      addNewUser: {
        id: "",
        name: "",
        realName: "",
        unit: "",
        phone: "",
        right: ""
      },
      labelPosition: "right",
      addForm: {
        name: [{ required: true, message: "请填写用户名", trigger: "blur" }],
        realName: [
          { required: true, message: "请填写真实姓名", trigger: "blur" }
        ],
        unit: [{ required: true, message: "请填写所属单位", trigger: "blur" }],
        phone: [{ required: true, message: "请填写联系电话", trigger: "blur" }],
        right: [{ required: true, message: "请选择权限", trigger: "blur" }]
      },
      shopTable: [],
      shopTable1: [],
      sousuo: "",
      dialogFormVisible: false,
      dialogFormVisibleUpdate: false,
      total: 1,
      currentPage: 1,
      pageSize: 18,
      flag: true
    };
  },
  created() {
    this.orderList(this.currentPage);
  },
  mounted() {
    this.$nextTick(() => {
      let qx = this.$store.getters.getUser.user_qx;
      if (qx === "超级管理员") {
        this.showShopBtn = false;

        this.showShopQx = true;
        this.showShopQxTwo = false;
        this.showShopDisableQx = false;

        this.showShopBtnDelete = false;
      } else if (qx === "管理员") {
        this.showShopBtn = false;

        this.showShopQx = false;
        this.showShopQxTwo = true;
        this.showShopDisableQxTwo = true;

        this.showShopBtnDelete = false;
      } else if (qx === "编辑者") {
        this.showShopBtn = true;
        this.showShopQx = false;
        this.showShopQxTwo = false;
        this.showShopBtnDelete = true;
      } else if (qx === "查看者") {
        this.showShopBtn = true;
        this.showShopQx = false;
        this.showShopQxTwo = false;
        this.showShopBtnDelete = true;
      }
    });
  },
  methods: {
    searchEnterFun(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13) {
        let s = this.sousuo;
        this.shopTable = [];
        this.$request({
          url: "/rf/findSysUserInfo",
          method: "get",
          params: { key: s, page: 1 }
          //headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
        })
          .then(response => {
            if (response.error_code == 0) {
              this.currentPage = 1;
              this.total = response.count;
              this.shopTable = response.data;
            } else {
              this.$message({ message: response.error_msg, type: "info" });
            }
          })
          .catch(error => {
            this.$message({
              message: "搜索失败，网络异常",
              type: "info",
              duration: 2000
            });
          });
      }
    },
    closeDialogFormVisible: function() {
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
    },
    closeDialogFormVisibleUpdate: function() {
      this.$nextTick(() => {
        this.$refs.formUpdate.resetFields();
      });
    },
    addShopItem() {
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.orderList(val);
    },
    prevClick(val) {
      this.orderList(val);
    },
    nextClick(val) {
      this.orderList(val);
    },
    submit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          let resData = {
            user_name: this.addNewUser.name,
            name: this.addNewUser.realName,
            unit: this.addNewUser.unit,
            phone: this.addNewUser.phone,
            user_qx: this.addNewUser.right
          };
          this.$request({
            url: "/rf/addSysUserInfo",
            method: "post",
            data: resData,
            headers: { "Content-Type": "application/json;charset=UTF-8" }
          })
            .then(response => {
              if (response.error_code == 0) {
                this.dialogFormVisible = false;
                this.$message({ type: "success", message: "添加成功" });
                this.orderList(this.currentPage);
              } else {
                this.$message({ message: response.error_msg, type: "info" });
              }
            })
            .catch(error => {
              this.$message({
                message: "提交失败，网络异常",
                type: "info",
                duration: 2000
              });
            });
        }
      });
    },
    orderList(page) {
      let s = this.sousuo;
      this.shopTable = [];
      this.$request({
        url: "/rf/findSysUserInfo",
        method: "get",
        params: { key: s, page: page }
      })
        .then(response => {
          if (response.error_code == 0) {
            response.data.forEach((val, index) => {
              if (val.user_qx == "超级管理员") {
                response.data.splice(index, 1);
              }
            });
            this.total = response.count;
            this.shopTable = response.data;
          } else {
            this.$message({ message: response.error_msg, type: "info" });
          }
        })
        .catch(error => {
          this.$message({
            message: "查询失败，网络异常",
            type: "info",
            duration: 2000
          });
        });
    },
    modify(row) {
      this.dialogFormVisibleUpdate = true;
      let qx = row.user_qx;
      if (qx === "管理员") {
        this.showShopDisableQxTwo = true;
      } else {
        this.showShopDisableQxTwo = false;
      }
      this.$nextTick(() => {
        this.$refs.formUpdate.resetFields();
        this.addNewUser = {
          id: row.id,
          name: row.user_name,
          realName: row.name,
          unit: row.unit,
          phone: row.phone,
          right: row.user_qx
        };
      });
    },
    update() {
      this.$refs.formUpdate.validate(async valid => {
        if (valid) {
          let resData = {
            id: this.addNewUser.id,
            user_name: this.addNewUser.name,
            name: this.addNewUser.realName,
            unit: this.addNewUser.unit,
            phone: this.addNewUser.phone,
            user_qx: this.addNewUser.right
          };
          this.$request({
            url: "/rf/updateSysUserInfo",
            method: "post",
            data: resData,
            headers: { "Content-Type": "application/json;charset=UTF-8" }
          })
            .then(response => {
              if (response.error_code == 0) {
                this.dialogFormVisibleUpdate = false;
                this.$message({ type: "success", message: "修改成功" });
                this.orderList(this.currentPage);
              } else {
                this.$message({ message: response.error_msg, type: "info" });
              }
            })
            .catch(error => {
              this.$message({
                message: "提交失败，网络异常",
                type: "info",
                duration: 2000
              });
            });
        }
      });
    },
    delet(row) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        this.$request({
          url: "/rf/deleteSysUserInfo",
          method: "post",
          data: { id: row.id }
        })
          .then(response => {
            if (response.error_code == 0) {
              this.$message({ type: "success", message: "删除成功" });
              if (this.shopTable.length !== 1) {
                this.orderList(this.currentPage);
              } else {
                let cpage = this.currentPage - 1;
                if (cpage > 0) {
                  this.orderList(cpage);
                } else {
                  this.orderList(1);
                }
              }
            } else {
              this.$message({ type: "success", message: response.error_msg });
            }
          })
          .catch(error => {
            this.$message({
              message: "删除失败，网络异常",
              type: "info",
              duration: 2000
            });
          });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.el-card__body {
  .control-box {
    display: flex;
    justify-content: space-between;
    .add-shop {
      width: 92px;
      height: 32px;
      border: 1px solid #a6e8fb;
      box-shadow: 0px 0px 1px 0px #2baaeb;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /deep/.el-button {
      span {
        font-size: 20px;
      }
    }
    /deep/.add-form {
      .el-dialog {
        margin-right: 460px;
        .el-dialog__header {
          .el-dialog__title {
            font-size: 26px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #202020;
          }
        }
        .el-dialog__body {
          // height:400px;
          // overflow-y: scroll;
          padding-top: 50px;
          padding-left: 16px;
          padding-right: 16px;
          padding-bottom: 24px;
          .el-form {
            .el-form-item {
              .el-form-item__label {
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #3a4262;
              }
              .el-form-item__content {
                .el-input {
                  width: 350px;
                  height: 36px;
                  background: #fafcfd;
                }
              }
            }
            .upload-form-item {
              .el-form-item__content {
                .image-upload {
                  display: inline-block;
                  margin-right: 15px;
                }
                // .uoloadSty .el-upload--picture-card{
                //   width:110px;
                //   height:110px;
                //   line-height:110px;
                //   display: inline-block;
                //   margin-right:15px;
                // }
                .inline {
                  display: inline-block;
                  margin-right: 15px;
                }
                .hide .el-upload--picture-card {
                  display: none; /* 上传按钮隐藏 */
                }
                .hide2 .el-upload--picture-card {
                  display: none; /* 上传按钮隐藏 */
                }
              }
            }
          }
        }
      }
    }
  }
  .shop_list_table {
    margin-top: 17px;
  }
  .el-pagination {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .el-button {
    font-size: 16px;
  }
}
</style>
